<template>
    
    <el-container id="resultcontainer" class="oc">
      
      
            <el-header id="ressear">
                <!-- <div id="ressear"> -->
                  
                    <!-- <svg style="margin-top:5px" t="1621172112397" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8664" width="32" height="32"><path d="M895.3 212.7h-9.8v560.1c0.6 4.1 0 14.4 0 18.7 0 51.3-42 93.4-93.4 93.4H232c-51.3 0-93.4-23.3-93.4-74.7 0-51.3 42-74.7 93.4-74.7H810.8V63.4H250.7C148 63.4 64 147.4 64 250.1v522.8c0 102.7 84 186.7 186.7 186.7h522.8c102.7 0 186.7-84 186.7-186.7V277.6c0-35.7-29.2-64.9-64.9-64.9z" fill="#efefef" p-id="8665"></path><path d="M250.7 772.9c-20.5 0-37.3 16.8-37.3 37.3s16.8 37.3 37.3 37.3h522.8c20.5 0 37.3-16.8 37.3-37.3s-16.8-37.3-37.3-37.3H250.7z" fill="#efefef" p-id="8666"></path></svg> -->
                  
                  
                    <a href="/"><img style="cursor:pointer" height="25px" src="@/assets/sea.png" alt=""></a>
                 
                  <el-input
                    placeholder="Ocean Wiki"
                    v-model="input"
                    class="search-text"
                    clearable>
                    
                  </el-input>
                  <el-button
                    type="success"
                    icon="el-icon-search"
                    class="search-btn"
                    @click="search(input)">
                  </el-button>

                  <el-dropdown class="ava" v-show="showAva">

                    <el-avatar class="profile" size="medium" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />

                    <el-dropdown-menu style="width:15%" slot="dropdown">

                        <div style="margin: 10% 10%">{{username}}</div>

                        <el-divider content-position="center"></el-divider>

                        <!-- <el-dropdown-item icon="el-icon-user">个人账户</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-plus">邀请成员</el-dropdown-item> -->
                        <el-dropdown-item icon="el-icon-bangzhu">帮助中心</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-close" style="color: red" @click.native="logout">退出登录</el-dropdown-item>
                    
                    </el-dropdown-menu>
                
                  </el-dropdown>

                  <el-button v-show="showLogin" style="float:right;" @click="toLogin">登录</el-button>

                <!-- </div> -->
            </el-header>

            <el-main>
              <el-row>
                <el-col :span='14'>
                  <div class="res">
                    <strong style="color:white">结果：</strong><br/>
                    {{answer}}
                  </div>

                  <!-- <div class="article"> -->
                    <!-- <strong>{{title}}</strong><br> -->
                    <div class="article">
                      <mavon-editor
                        v-model="article"
                        :toolbarsFlag="false"
                        :editable="false"
                        :subfield="false"
                        :defaultOpen="'preview'"
                      />
                    </div>
                    
                  <!-- </div> -->
                </el-col>

                <el-col :span="10">
                  <el-card class="graph_card">
                    <div id="graph" class="graph"></div>
                  </el-card>

                  <el-card>
                    <div>
                      <strong>相关问题</strong><br>
                      <div style="width:20%;float:right">

                      <el-popover
                        placement="top-end"
                        width="500px"
                        trigger="click">
                          <div style="margin-bottom:10px">

                            <el-button type="primary" style="outline:none" round @click="clear">清空</el-button>
                            <el-button type="success" style="outline:none" round @click="submitUserEdit">提交</el-button>
              
                          </div>
                          <mavon-editor
                            v-model="userEdit.content"
                            style="height:500px;"
                          />
                          <el-link el-button type='primary' slot="reference" @click="fetchArticle">编辑词条</el-link>
                  
                      </el-popover>
                      

                    </div>
                      <ul v-for="(question, i) in related" :key="i">
                        <li>
                          <el-link 
                            :underline='false' 
                            @click="search(question.question)"
                            v-loading.fullscreen.lock="fullscreenLoading"
                          >
                            {{question.question}}
                          </el-link>
                        </li>
                      </ul>
                    </div>
                    
                  </el-card>

                </el-col>

              </el-row>
              
            
            </el-main>

    </el-container>

</template>

<script>
import request from "@/api/client.js";
import * as echarts from 'echarts';

export default {
  name: 'Result',
  data() {
      return {
          input: '',
          answer: '',
          article: '',
          title: '',
          related: [],
          fullscreenLoading: false,
          username: '----',
          showLogin: false,
          showAva: false,
          userEdit: {
            title: '',
            content: ''
          }
      }
  },

  mounted() {
    if(localStorage.getItem('token') == null) {
      this.showLogin = true
    } else {
      this.username = localStorage.getItem("username")
      this.showAva = true;
    }
    this.input = this.$route.params.ques;
    this.answer = sessionStorage.getItem('answer');
    this.article = sessionStorage.getItem('article');
    this.title = sessionStorage.getItem('title');
    this.related = JSON.parse(sessionStorage.getItem('related'));
    
    // 可视化
    request.visualize(this.title, 3).then(resp => {
      var list = resp.data.data.tribs
      console.log(list)

      var data = [
        {
          name: this.title,
        }, 
        {
          name: list[0].b,
        }, 
        {
          name: list[1].b,
        }, 
        {
          name: list[2].b,
        }
      ]

      var links = [
        {
            source: data[0].name,
            target: data[1].name,
            label: {
              formatter: list[0].r,
              show: true
            },
        }, 
        {
            source: data[0].name,
            target: data[2].name,
            label: {
              formatter: list[1].r,
              show: true
            },
        }, 
        {
            source: data[0].name,
            target: data[3].name,
            label: {
              formatter: list[2].r,
              show: true
            },
        }, 
        // {
        //   source: '大西洋',
        //   target: '世界第二大洋',
        //   label: {
        //     formatter: '是',
        //     show: true
        //   },
        // }, 
        // {
        //   source: '大西洋',
        //   target: '万历十一年意大利传教士利玛窦在广东肇庆翻译的一本名叫《山海舆地全图》的世界地图册',
        //   label: {
        //     formatter: '最早来自',
        //     show: true
        //   },
        // }
      ]

      var myChart = echarts.init(document.getElementById('graph'));


    

    var option = {
      title: {
        text: ''
      },
      tooltip: {},
      animationDurationUpdate: 1500,
      animationEasingUpdate: 'quinticInOut',
      series: [
          {
              type: 'graph',
              // layout: 'none',
              layout: 'force',
              symbolSize: 50,
              roam: true,
              force: {
                rpulsion: 100,
                  gravity:0.02,
                  edgeLength:200
              },
              draggable: true,
              label: {
                  show: true
              },
              edgeSymbol: ['circle', 'arrow'],
              edgeSymbolSize: [4, 10],
              edgeLabel: {
                  fontSize: 20
              },
              data: data,
              links: links,
              lineStyle: {
                  opacity: 0.9,
                  width: 2,
                  curveness: 0
              }
          }
      ]
    
    }
    myChart.setOption(option);
    })

  },

  methods: {

    toLogin() {
      this.$router.push("/login")
    },

    logout() {
      request.logout().then(resp => {
          localStorage.clear();
          sessionStorage.clear();
          this.$store.commit('RESET_STATE')
          this.$router.go(0)
      })
    },
    
    search(question) {
      const loading = this.$loading({
        lock: true,
        // text: '加载中...',
        // spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.5)'
      });
      
      request.search(question).then(response => {
        loading.close();
        this.showsearch = false;
        let answer = response.data.data.answer;
        console.log(response.data)
        sessionStorage.setItem('answer', answer);
        this.input = question;
        this.answer = answer
        this.article = response.data.data.article
        this.title = response.data.data.title
        this.related = response.data.data.related
      });

      request.visualize(this.title, 3).then(resp => {
        var list = resp.data.data.tribs
        console.log(list)

        var data = [
          {
            name: this.title,
          }, 
          {
            name: list[0].b,
          }, 
          {
            name: list[1].b,
          }, 
          {
            name: list[2].b,
          }
        ]

        var links = [
          {
              source: data[0].name,
              target: data[1].name,
              label: {
                formatter: list[0].r,
                show: true
              },
          }, 
          {
              source: data[0].name,
              target: data[2].name,
              label: {
                formatter: list[1].r,
                show: true
              },
          }, 
          {
              source: data[0].name,
              target: data[3].name,
              label: {
                formatter: list[2].r,
                show: true
              },
          }, 

        ]

        var myChart = echarts.init(document.getElementById('graph'));

        var option = {
          title: {
            text: ''
          },
          tooltip: {},
          animationDurationUpdate: 1500,
          animationEasingUpdate: 'quinticInOut',
          series: [
              {
                  type: 'graph',
                  // layout: 'none',
                  layout: 'force',
                  symbolSize: 50,
                  roam: true,
                  force: {
                    rpulsion: 100,
                    gravity:0.02,
                    edgeLength:200
                  },
                  draggable: true,
                  label: {
                      show: true
                  },
                  edgeSymbol: ['circle', 'arrow'],
                  edgeSymbolSize: [4, 10],
                  edgeLabel: {
                      fontSize: 20
                  },
                  data: data,
                  links: links,
                  lineStyle: {
                      opacity: 0.9,
                      width: 2,
                      curveness: 0
                  }
              }
          ]
        }
        myChart.setOption(option);
    
      })
    },

    submitUserEdit() {
      let tempArticle = {
        title: this.username + '_' + this.title,
        content: this.userEdit.content
      }
      request.uploadArticle(tempArticle).then(resp => {
        this.$message({
          message: '已提交',
          type: 'success',
          duration: 1500
        })
      })
    },

    clear() {
      this.userEdit.content = ''
    },

    fetchArticle() {
      this.userEdit.content = this.article;
    }

  }
}
</script>

<style>

.contributor {
  padding: 10px 0px;
}

.ava {
    float: right;
    display:block;
    height:40px;
    width: unset !important;
}

.contributor {
  margin-top: 1rem;
}

#resultcontainer .el-header {
    padding: 10px;
}

.search-text > .el-input__inner {
  /* width: 50%; */
  /* box-shadow: 0px 0px 10px rgba(0, 0, 0, .80); */
  margin-right:0px;
  margin-left: 5px;
  box-shadow: none;
  border: none;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

#ressear {
    margin-left: 0px;
    width:100%;

}

#ressear .el-button {
  width: 2%;
  outline: none;
  border: none;
  padding: 12.8px 4%;
  box-shadow: none;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

#ressear .el-input {
  width: 35%;
  margin-bottom:10px;
  box-shadow: none;
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); */
  border-top-left-radius: 0px;
}

.graph_card {
  margin-bottom: 1rem;
  height: 480px;
}

.graph {
  height: 440px;
  width: 100%;
  margin: 0 auto;
}

.res {
  padding: 1em;
  background-color: rgba(0, 0, 0, .25);
  width: 90%;
  border-radius: 12px;
  color: beige;
  font-weight: bold;
  border-width: 2px;
  border-color: black;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, .30);
}

.article {
  margin-top: 1em;
  padding: 1em;
  /* border: solid 0px black; */
  width: 90%;
  background-color: rgba(251, 251, 251, 1);
  border-radius: 10px;
  border-radius: 10px;
  font-family: '微软雅黑';
  box-shadow: 0 0 1em rgba(68, 68, 68, 0.70);
}

</style>